// pages/user.js
import * as echarts from '../../ec-canvas/echarts';
import api from "../../api/cloudApi.js"
let myCharts;
let lineOption = {
  xAxis: {
    type: 'category',
    boundaryGap: false,
  },
  yAxis: {
    type: 'value',
    max: 140
  },
  series: [{
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: 'line',
    areaStyle: {}
  }]
};

let radarOption = {
  title: {
    text: '成绩雷达图'
  },
  legend: {
    top: '10%',
    data: ['本次考试', '上次考试']
  },
  radar: {
    center: ['50%', '60%'],
    // shape: 'circle',
    name: {
      textStyle: {
        color: '#fff',
        backgroundColor: '#999',
        borderRadius: 3,
        padding: [3, 5]
      }
    },
    indicator: [{
        name: '数学',
        max: 160
      },
      {
        name: '化学',
        max: 130
      },
      {
        name: '语文',
        max: 160
      },
      {
        name: '政治',
        max: 130
      },
      {
        name: '物理',
        max: 130
      },
      {
        name: '英语',
        max: 160
      },
      {
        name: '历史',
        max: 130
      },
    ]
  },
  series: [{

    type: 'radar',

    data: [{
        value: [0, 0, 0, 0, 94, 110, 88],
        name: '本次考试'
      },
      {
        value: [90, 76, 54, 103, 25, 110, 88],
        name: '上次考试'
      }
    ]
  }]
};

function initChar(canvas, width, height) {
  myCharts = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(myCharts);
  myCharts.setOption(radarOption);
  return myCharts;
}
Page({

  /**
   * 页面的初始数据
   */
  data: {
    ec: {
      onInit: initChar
    },
    scoreOption: JSON.parse(JSON.stringify(radarOption)),
    lineScoreOption: JSON.parse(JSON.stringify(lineOption)),
    selectedTagName: '',
    totalPage: 0,
    selectedPage: 1
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {
    this.reloadRadarChart();
  },

  showRadar() {
    this.reloadRadarChart()
    this.setData({
      selectedPage: 1,
      selectedTagName: ''
    })
  },
  async reloadRadarChart() {
    let res = await api.getScores();
    let courses = ["maths", "chemistry", "chinese", "politics", "physical", "english", "history"]
    if (res) {
      this.setData({
        totalPage: res.length - 1
      })

      let ordered = [
        [],
        []
      ]
      courses.forEach(c => {
        ordered[0].push(res[this.data.selectedPage - 1][c])
        ordered[1].push(res[this.data.selectedPage][c])
      })
      let prefix = "scoreOption.series[0].data"
      this.setData({
        [prefix + '[0]']: ordered[0],
        [prefix + '[1]']: ordered[1]
      })
      myCharts.clear()
      myCharts.setOption(this.data.scoreOption)
      console.log(this.data.scoreOption)
    } else {
      wx.showToast({
        title: '成绩信息获取失败',
      })
    }
  },

  async reloadLineOptions(ev) {
    this.setData({
      selectedTagName: ev.currentTarget.dataset.course
    })
    let res = await api.getScores();
    let courses = ["maths", "chemistry", "chinese", "politics", "physical", "english", "history"]
    if (res) {
      console.log(res)
      let courseScores = res.reverse().map(c => c[this.data.selectedTagName])
      let prefix = "lineScoreOption.series[0].data"
      this.setData({
        [prefix]: courseScores
      })
      myCharts.setOption(this.data.lineScoreOption)
    } else {
      wx.showToast({
        title: '成绩信息获取失败',
      })
    }
  },

  changePage(ev) {
    let page = ev.currentTarget.dataset.page
    this.setData({
      selectedPage: page
    })
    this.reloadRadarChart()
  },
  prevPage() {
    this.setData({
      selectedPage: this.data.selectedPage > 1 ? this.data.selectedPage - 1 : 1
    })
    this.reloadRadarChart()
  },

  nextPage() {
    this.setData({
      selectedPage: this.data.selectedPage < this.data.totalPage ? this.data.selectedPage + 1 : this.data.totalPage
    })
    this.reloadRadarChart()
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  }
})